<script setup lang="ts">
import { getBasePriceListApi, getSynchronousApi } from '@/apis/order'
import { ElMessage } from 'element-plus'
import updateDialog from './components/updateDialog.vue'

const tableData = ref([])

/** 显示对话框 */
const showDialog = ref(false)

/** 搜索 */
const searchParams = ref({})

/** 编辑数据 */
const updateInfo = ref(0)

/** 获取基础价格列表 */
const getBaseList = async () => {
  const data = await getBasePriceListApi(searchParams.value)
  tableData.value = data
}

/** 同步平均值 */
const syncAverage = async () => {
  const res = await getSynchronousApi()
  ElMessage.success(res.msg)
  getBaseList()
}

/** 编辑 */
const handleEdit = (row) => {
  updateInfo.value = row
  showDialog.value = true
}

/** 重置 */
const handleReset = () => {
  searchParams.value = {}
  getBaseList()
}

onMounted(() => {
  getBaseList()
})
</script>

<template>
  <div class="shop-manage-container">
    <div class="search-box">
      <el-form inline>
        <el-form-item label="商品SKU">
          <el-input v-model="searchParams.shop_sku" placeholder="请输入商品SKU" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getBaseList">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <div class="operate-btn">
        <el-button type="primary" @click="syncAverage">同步</el-button>
      </div>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column label="图片" width="100">
          <template v-slot="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.shop_img" :preview-src-list="[scope.row.shop_img]"
              fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="shop_ch_name" label="商品名称" width="120" />
        <el-table-column prop="shop_sku" label="商品SKU" width="180" />
        <el-table-column prop="shop_inventory" label="商品库存" width="180" />
        <el-table-column prop="shop_base_weight" label="商品自定义信息" min-width="120">
          <template v-slot="scope">
            <div class="row_2">

              <div>
                采购价：<span class="num">￥{{ scope.row.shop_car_price || 0 }}</span>
              </div>
              <div>
                物流价格：<span class="num">￥{{ scope.row.shop_base_price || 0 }}</span>
              </div>
              
            </div>

            <div>
              物流重量：<span class="num">{{ scope.row.shop_base_weight || 0 }}(克)</span>
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="shop_average_price" label="商品平均信息" min-width="120">
          <template v-slot="scope">
            <div>
              平均物流重量：<span class="num">{{ scope.row.shop_average_weight || 0}}(克)</span>
            </div>
            <div>
              平均物流价格：<span class="num">￥{{ scope.row.shop_average_price || 0 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="g_time" label="同步时间" min-width="180" />
        <el-table-column fixed="right" width="100">
          <template v-slot="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <update-dialog :info="updateInfo" @confirm="getBaseList" v-model:visible="showDialog"></update-dialog>
  </div>
</template>

<style lang="scss" scoped>
.shop-manage-container {

  .num {
    font-weight: bold;
    color: red;
  }
}
</style>
